<template>
  <div>
    <el-card class="login-wrap">
      <div slot="header" class="login-img">
        <img src="../../assets/image/niao.png" alt="">
      </div>
      <el-form ref="loginForm" class="" :model="loginForm" :rules="rules">
        <el-form-item prop="name">
          <el-input class="login-input" v-model.trim="loginForm.name" placeholder="请输入登录账号">
            <i slot="prefix" class="iconfont icon-yonghu-copy"></i>
          </el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input class="login-input" type="password" autocomplete="off" v-model.trim="loginForm.password"
                    placeholder="请输入登录密码" @keyup.enter.native="clickLogin">
            <i slot="prefix" class="iconfont icon-yincang"></i>
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button :loading="isLoading" @click="clickLogin" type="primary" class="w-block">登录</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <slide-verify v-if="isVerifyDialog" @close="closeSlideVerify" @success="successSlideVerify"></slide-verify>
  </div>
</template>

<script>
  import slideVerify from "../../components/slideVerify/slideVerify";
  import {login} from "../../assets/api/getData";
  import {mapMutations} from "vuex";
  import {setStore} from "../../assets/utils/tools";

  export default {
    name: "login",
    components: {
      slideVerify
    },
    data() {
      return {
        loginForm: {
          name: "",
          password: "",
        },
        rules: {
          name: {required: true, message: "必填", trigger: "blur"},
          password: {required: true, message: "必填", trigger: "blur"},
        },
        isLoading: false,
        isVerifyDialog: false,
      }
    },
    methods: {
      ...mapMutations(['SET_USER_INFO']),
      closeSlideVerify() {
        this.isVerifyDialog = false;
        this.isLoading = false;
      },
      successSlideVerify() {
        this.isVerifyDialog = false;
        login(this.loginForm)
          .then(res => {
            this.isLoading = false;
            this.$message.success(res.message);
            this["SET_USER_INFO"](res.data.userInfo);
            setStore('token', res.data.token);
            this.$router.push({path: "/"});
          })
          .catch(() => {
            this.isLoading = false;
          })
      },
      clickLogin() {
        this.$refs['loginForm'].validate(valid => {
          if (valid) {
            this.isLoading = true;
            this.isVerifyDialog = true;
          } else {
            return false;
          }
        });
      }
    }
  }
</script>

<style lang="less" scoped>
  .login-wrap {
    width: 400px;
    margin: 20vh auto;
    background-color: @color-white;

    .login-img {
      width: 50px;
      margin: 0 auto;

      img {
        width: 100%;
      }
    }
  }
</style>
